// 定义一个轮播图类
class Carousel {
    constructor(tag) {
        // 获取目标元素
        this.tag = document.querySelector(tag);
        // 获取左右点击按钮
        this.lBtn = this.tag.querySelector(".l_btn");
        this.rBtn = this.tag.querySelector(".r_btn");
        //获取小圆点列表
        this.dot_box = this.tag.querySelector(".dot_box")
        // 获取li列表
        this.list = this.tag.querySelectorAll(".img_box > ul > li");
        // 获取ul列表
        this.ul = this.tag.querySelectorAll(".img_box > ul");
        // 获取所有li要移动的类名
        this.listClassName = ["list01", "list02", "list03", "list04"];
        // 触发绑定事件
        this.eventFn();
        // 初始化变量
        this.index = 1;
        // 获取上一个初始化变量值
        this.lastIndex = 1;
        this.timer;
        this.timeFn();
        this.aaaa();
    };
    // li全部重新设置类名
    restListFn() {
        this.list.forEach((item, idx) => {
            item.className = this.listClassName[idx];
        });
    };



    // 点击按钮
    eventFn() {
        this.lBtn.addEventListener("click", () => {
            // 操作数组
            // 添加数组第一个值到最后
            this.listClassName.push(this.listClassName[0]);
            // 删除数字的第一个值
            this.listClassName.shift();
            // li全部重新设置类名
            this.restListFn();

            // let ddd = this.dot_box.children[this.index--]

            // // console.log(this.index--);
            // console.log(ddd);
            // // this.dotColor(ddd);
            // if (this.index < 0) {
            //     this.index = 4;
            //     console.log(123);
            // } 


            // // index操作完成之后重新赋值
            // this.lastIndex = this.index;

            // this.index++;
            // // index最大值
            // if (this.index == this.listClassName.length) {
            //     this.index = 0;
            // };

            // // 去除当前li类名
            // this.list[this.lastIndex].classList.remove(this.listClassName[this.lastIndex]);
            // // 添加新类名
            // this.list[this.index].classList.add(this.listClassName[this.index]);
        });

        this.rBtn.addEventListener("click", () => {
            // 操作数组
            // 添加数组第一个值到最后
            this.listClassName.unshift(this.listClassName[this.listClassName.length - 1]);
            // 删除数字的第一个值
            this.listClassName.pop();
            // li全部重新设置类名
            this.restListFn();

            let ddd = this.dot_box.children[this.index++]


            // console.log(ddd);
            this.dotColor(ddd);


            if (this.index == 4) {
                this.index = 0;
            }
            // console.log(ddd);

        });


    }

    dotColor(tag) {
        tag.parentElement.children[this.lastIndex - 1].classList.remove("dot_active");
        tag.classList.add("dot_active");
        // console.log(this.lastIndex,this.index);
        // 重新赋值给lastIndex，目的是为了拿到上一次的操作值index
        this.lastIndex = this.index;

    };



    // 自动轮播
    timeFn() {
        if (this.timer) {
            clearInterval(this.timer);
        }
        this.timer = setInterval(() => {
            // this.eventFn.rBtn(this.ul);
            this.rBtn.click();
            // console.log(this.rBtn);
        }, 1000);
    }

    // 鼠标移入box区域，停止定时器
    aaaa(){
        this.tag.addEventListener("mouseenter", () =>{
            clearInterval(this.timer);
        });
    // 鼠标移出box区域，开始定时器
    this.tag.addEventListener("mouseleave", ()=> {
            setTimeout(this.timeFn(), 2000)
        });
    
    // 检测页面是否切换，切换就停止定时器
    window.addEventListener("visibilitychange", ()=> {
            if (document.hidden) {
                clearInterval(this.timer);
            } else {
                this.timeFn();
            }
        });
    
    }
    }
